import React from 'react';
import { Button, Card, Typography } from 'antd';
import { debugAuth, getToken, getCurrentUser, isAuthenticated } from '../utils/auth';

const { Text, Paragraph } = Typography;

const DebugAuth = () => {
    const handleDebug = () => {
        debugAuth();
    };

    const handleClear = () => {
        localStorage.clear();
        window.location.reload();
    };

    const token = getToken();
    const user = getCurrentUser();
    const authenticated = isAuthenticated();

    return (
        <Card title="认证调试信息" style={{ margin: 20 }}>
            <Paragraph>
                <Text strong>Token 存在: </Text>
                <Text type={token ? 'success' : 'danger'}>
                    {token ? '是' : '否'}
                </Text>
            </Paragraph>

            <Paragraph>
                <Text strong>Token 内容: </Text>
                <Text code>{token ? token.substring(0, 50) + '...' : '无'}</Text>
            </Paragraph>

            <Paragraph>
                <Text strong>用户信息: </Text>
                <Text code>{JSON.stringify(user)}</Text>
            </Paragraph>

            <Paragraph>
                <Text strong>认证状态: </Text>
                <Text type={authenticated ? 'success' : 'danger'}>
                    {authenticated ? '已认证' : '未认证'}
                </Text>
            </Paragraph>

            <Button onClick={handleDebug} type="primary" style={{ marginRight: 10 }}>
                控制台调试
            </Button>

            <Button onClick={handleClear} danger>
                清除所有数据
            </Button>
        </Card>
    );
};

export default DebugAuth;
